<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 个人理解 函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。 -->
  <input type="text" id="input">
  <script>
    var input = document.getElementById('input')

    function debounce (delay, callback) {
      let timer

      return function (value) {
        clearTimeout(timer)
        timer = setTimeout(function () {
          // console.log(value)
          callback(value)
        }, delay)
      }
    }

    function fn (value) {
      console.log(value)
    }

    var debounceFunc = debounce(1000, fn)

    input.addEventListener('keyup', function (e) {
      // console.log(e.target.value)
      // debounce(1000, e.target.value)
      debounceFunc(e.target.value)
    })
  </script>
</body>
</html>